<template>
  <div id="canvas-wrap" style="height: 900px;">
    <canvas id="canvas-content"></canvas>
    <div id="root">
        <div class="form">
            <h1>用户注册界面</h1>
            <!-- <label for="name">账号:</label>
            <input type="text" id="name"> -->
            <!-- v-model.trim:对输入的数据首尾空格过滤 -->
            <div class="login_box">
                <input type="text" id="account" v-model.trim="userInfo.account" required="required">
                <label for="account">账号:</label>
            </div>
            <div class="login_box">
                <input type="password" id="password" v-model="userInfo.password" required="required">
                <label for="password">密码:</label>
            </div>
            <div class="login_box">
                <input type="password" id="isPassword" v-model="userInfo.isPassword" required="required">
                <label for="isPassword">确定账号密码:</label>
            </div>
            <div class="login_box">
                <input type="password" id="payPassword" v-model="userInfo.payPassword" required="required">
                <label for="payPassword">支付密码:</label>
            </div>
            <div class="login_box">
                <input type="password" id="isPaymentPassword"  v-model="userInfo.isPayPassword" required="required">
                <label for="isPaymentPassword">确定支付密码:</label>
            </div> 
            <div class="login_box">
                <input type="text" id="name" v-model.trim="userInfo.userName" required="required">
                <label for="name">姓名:</label>
            </div>
            <div class="login_box" style="height:40px">
                <input type="text" class="fl" style="width:50%" v-model="userInfo.code" required="required">
                <label for="code">验证码:</label>
                <span class="fl" style="width:50%;height:40px; background-color: #f1f1f1;line-height: 40px;">{{code}}</span>
            </div>
            <!-- v-model.lazy失去焦点之后收集数据 -->
            <input type="checkbox" v-model="userInfo.agree"> 阅读并接受<a href="https://www.ncwu.edu.cn/index.htm">《用户协议》</a><br>
            <button class="fl" style="width: 100px;" @click="goLogin()">返回登录</button><button class="fr" @click="register()">确定</button>
        </div>
  </div>
  </div>
</template>

<script>
import axios from 'axios'
import { canvasInit } from '../../utils/star.js'
export default {
    name:'Register',
    data() {
      return {
        code:'',
        userCreatetime:'',
        userCredit:100,
        userInfo:{
            account:'',
            password:'',
            isPassword:'',
            payPassword:'',
            isPayPassword:'',
            userName:'',
            code:"",
            agree:''
        }
      }
    },
    created() {
        this.getCode()
        this.userCreatetime = new Date()
    },
    mounted() {
        canvasInit()
        this.userCreatetime = this.formatDateTime(this.userCreatetime) + ' ' +String(this.userCreatetime).slice(16,24)
        console.log(this.userCreatetime)
    },
    methods: {
        // 注册成功清空栏目
        clearForm(){
            this.userInfo.account = ''
            this.userInfo.password = ''
            this.userInfo.isPassword = ''
            this.userInfo.payPassword = ''
            this.userInfo.isPayPassword = ''
            this.userInfo.userName = ''
            this.userInfo.code = ''
            this.userInfo.agree = ''
        },
        // 返回登录
        goLogin(){
            this.$router.push('/login')
        },
        register(){
            //验证账号，本系统账号类似手机号----
            /*
            ----账号认证规则：
                (1)以1开头
                (2)第二位3-9任意数字
                (3)3未以后任意9个数字
    
                综上-->/^1[3-9][0-9]{9}$/开头与结尾不能少
            */
            // let reg = /^1[3-9][0-9]{9}$/
            // console.log(reg.test('17777395849'))
            if(this.userInfo.agree){
                // 密码正则验证  var regex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,30}');
                // 密码中必须包含字母、数字、特称字符，至少6个字符，最多30个字符。
                if(String(this.userInfo.password).length >=6){
                    if(String(this.userInfo.payPassword).length == 6){
                        if(this.userInfo.password !== this.userInfo.isPassword && this.userInfo.payPassword === this.userInfo.isPayPassword){
                            alert("您两次用户密码输入不一致，请重新输入")
                        }else if(this.userInfo.password === this.userInfo.isPassword && this.userInfo.payPassword !== this.userInfo.isPayPassword){
                            alert("您两次支付密码输入不一致，请重新输入")
                        }else if(this.userInfo.password !== this.userInfo.isPassword && this.userInfo.payPassword !== this.userInfo.isPayPassword){
                            alert("您两次账户密码与支付密码输入不一致，请重新输入")
                        }else{
                            if(this.code == this.userInfo.code){
                                // 添加用户
                                axios.get("http://localhost:8080/api/addUser/addUserlist",{
                                  params:{
                                    userName:this.userInfo.userName,
                                    userAccount:this.userInfo.account,
                                    userPassword:this.userInfo.password,
                                    userCredit:this.userCredit,
                                    state: 1,
                                    userCreatetime:this.userCreatetime,
                                    payPassword:this.userInfo.payPassword
                                  }
                                }).then(
                                  res=>{
                                    this.$message({
                                      message:'用户信息注册成功',
                                      type:'success'
                                    })
                                    this.clearForm()
                                    // console.log("添加成功")
                                  },
                                  error=>{
                                    console.log("b",error.message)
                                  }
                                )

                                console.log(this.userInfo,this.userCredit,this.userCreatetime)
                            }else{
                                alert("你的验证码不正确")
                            }
                        }
                    }else{
                        alert("支付密码为6位数！！")
                    }
                }else{
                    alert("请输入至少为6位数字的密码！！！")
                }
            }else{
                alert("请勾选《用户协议》条件！！")
            }
            // axios.get("http://localhost:8080/api/addUser/addUserlist",{
            //   params:{
            //     userId:this.$store.state.user.userlist.userId,
            //     Nickname:this.$store.state.user.userlist.Nickname,
            //     state: 1,
            //     nowTime:this.nowTime,
            //     Content:this.word
            //   }
            // }).then(
            //   res=>{
            //     this.$message({
            //       message:'注册成功',
            //       type:'success'
            //     })
            //     this.clearForm()
            //     // console.log("添加成功")
            //   },
            //   error=>{
            //     console.log("b",error.message)
            //   }
            // )
            
        },
        // 时间转换
        formatDateTime (date) {
          var date = new Date(date)
          var y = date.getFullYear();
          var m = date.getMonth() + 1;
          m = m < 10 ? ('0' + m) : m;
          var d = date.getDate();
          d = d < 10 ? ('0' + d) : d;
          // return y + '-' + m + '-' + d+' '+h+':'+minute;
          return y + '-' + m + '-' + d
        },
        getCode(){
            //随机生成6位数
            this.code = Math.floor(Math.random()*1000000)
            this.code = this.code < 100000 ? '0'+thiscode : this.code 
            console.log(String(this.code).length)
        },
    },
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}
#canvas-wrap {
	position: relative;
	width: 100%;
    /* height: 900px; */
	/* background: #333; */
    background-image: url('./img/bg.jpg');
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	z-index: 1;
}
h1{
    color: #fff;
	text-align: center;
	letter-spacing: 6px;
	font-size: 36px;
    font-weight: normal;
    margin: 15px auto;  
}
#root{
    width: 32%;
    height: 500px;
	text-align: center;
	background:rgba(186, 186, 186, 0.413);
	box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    display: flex;
	/*让弹性项目垂直排列  原理是改变弹性盒子的主轴方向  
	父元素就是弹性盒子  现在改变后的主轴方向是向下了*/
	flex-direction: column;
	/*让弹性项目在交叉轴方向水平居中  现在主轴的方向是向下  
	交叉轴的方向是与主轴垂直 交叉轴的方向是向右*/
	align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -248px;
}
.form .login_box{
    position: relative;
	width: 100%;
}
.form .login_box label{
    position:absolute;
	top: 0 ;
	left: 0;
	padding: 5px 0;
	color: #fff;
    pointer-events: none;
	/*加个过度*/
	transition: all 0.5s linear;
}
/* 当输入合法时或者获取input焦点，让文字后移 */
.form .login_box input:focus+label,
.form .login_box input:valid+label{
	top: -10px;
	color: #03e9f4;
	font-size: 12px;
}
.form .login_box input{
    /*清除input框自带的边框和轮廓*/
	outline: none;
	border: none;
	width: 100%;
	padding: 10px 0;
	margin-bottom: 5px;
	color: #fff;
	font-size: 16px;
	border-bottom: 1px solid #fff;
	background-color: transparent;
}
.form div:last-of-type{
    margin-bottom: 10px;
}
button{
    width: 50px;
    height: 25px;
    line-height: 25px;
    border: 1px solid transparent;
    border-radius: 5px;
    outline: none; 
    margin-top: 10px;
    background-color: transparent;
    font-size: 20px;
    color: #03e9f4;
}
button:hover{
    color: #fff;
	background-color: #03e9f4;
	box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 100px #03e9f4;
}
</style>